<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="lib/css/mdui.css">
    <link rel="stylesheet" href="./css/master.css">
    <link rel="stylesheet" href="./css/music_player.css">
    <link rel="stylesheet" href="./css/music_search.css">
    <link rel="stylesheet" href="./css/book_head.css">
    <link rel="stylesheet" href="./css/book_search.css">
    <link rel="stylesheet" href="./css/movie_head.css">
    <link rel="stylesheet" href="./css/movie_search.css">
    <script src="lib/js/mdui.js" charset="utf-8"></script>
    <script src="lib/js/template.js" charset="utf-8"></script>
    <title>几寻</title>
</head>
<body class="mdui-theme-primary-indigo mdui-appbar-with-toolbar">
    <div class="mdui-container-fluid">
        <!-- 应用栏 -->
        <div class="mdui-appbar mdui-appbar-fixed">
            <!-- 工具栏 -->
            <div class="mdui-toolbar mdui-color-theme">
                <a href="javascript:;" class="mdui-btn mdui-btn-icon" id="drawer-btn"><i class="mdui-icon material-icons">&#xe5d2;</i></a>
                <a href="javascript:;" class="mdui-typo-headline">几寻</a>
                <!-- <a href="javascript:;" class="mdui-typo-title">Title</a> -->
                <div class="mdui-toolbar-spacer"></div>
                <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe8b6;</i></a>
                <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe5d5;</i></a>
                <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe5d4;</i></a>
            </div>
        </div>
        <!-- tab选项卡 -->
        <div class="mdui-tab mdui-color-theme mdui-tab-centered" mdui-tab>
            <a href="#book" class="mdui-ripple mdui-ripple-white">
                <i class="mdui-icon material-icons">book</i>
                <label>图书</label>
            </a>
            <a href="#music" class="mdui-ripple mdui-ripple-white">
                <i class="mdui-icon material-icons">music_note</i>
                <label>音乐</label>
            </a>
            <a href="#movie" class="mdui-ripple mdui-ripple-white">
                <i class="mdui-icon material-icons">local_movies</i>
                <label>电影</label>
            </a>
        </div>
        <!-- 图书模块 -->
        <div id="book" class="mdui-p-a-2">
            <!-- 头部图片展示 -->
            <div class="mdui-col-xs-12 mdui-card mdui-shadow-12" id="book-head">
                <!-- <img src="img/book_head.jpg" alt="" id="book-head-show-img"> -->
                <span id="book-head-text">书卷多情似故人</span>
                <!-- <span id="book-head-text-2">晨昏忧乐每相亲</span> -->
            </div>
            <!-- 图书搜索模块 -->
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-card mdui-shadow-6" id="book_search">
                <div id="book-search-box">
                    <i class="mdui-icon material-icons">search</i>
                    <label class="mdui-textfield-label">图书</label>
                    <input class="mdui-textfield-input" id="book-search-content" type="text"/>
                    <!-- 搜索按钮 -->
                    <button class="mdui-btn mdui-color-pink-a200 mdui-ripple" id="book-search-btn" type="button" name="button">搜索</button>
                </div>
                <!-- 搜索时进度条 -->
                <div class="mdui-progress" id="book-search-waiting">
                    <div class="mdui-progress-indeterminate mdui-color-pink-a200"></div>
                </div>
                <!-- 搜索结果展示模块 -->
                <!-- 定义模板 -->
                <div id="book-search-result-box">
                    <script type="text/html" id="bookSearchTemp">
                        {{each books as aBook index}}
                            {{if index<5}}
                            <div data-title="{{aBook.title}}" data-index="{{index}}" data-author="{{aBook.author[0]}}" data-rating="{{aBook.rating.average}}" data-img="{{aBook.image}}" class="mdui-card mdui-hoverable book-search-result-card" onmouseout="bookResultCardOut(this)" onmouseover="bookResultCardIn(this)">
                                <!-- <div style="" class="msg-box">{{aBook}}</div> -->
                                <img src={{aBook.images.large}} alt="" class="book-search-result-img">
                                <span class="book-search-result-title mdui-text-truncate">{{aBook.title}}</span>
                                <br>
                                <span class="book-search-result-author">{{aBook.author[0]}}</span>
                                <button class="book-search-result-play-btn mdui-btn mdui-color-indigo-900 mdui-ripple" mdui-dialog="{target: '#book-detail-content-box'}" onclick="bookResultDetail(this)">详情</button>
                            </div>
                            {{/if}}
                        {{/each}}
                    </script>
                </div>
            </div>
            <!-- 分类图书 -->
            <!-- 第一类 ：文学-->
            <div class="mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-text-color-pink-a200" id="book-first-box">
                <h2>文学</h2>
                <div id="book-first-content-box">
                    <script type="text/html" id="bookClassTemp">
                        {{each books as aBook index}}
                            {{if index<20}}
                            <div data-title="{{aBook.title}}" data-index="{{index}}" data-author="{{aBook.author}}" data-rating="{{aBook.rating.average}}" data-img="{{aBook.image}}" class="mdui-card mdui-hoverable book-search-result-card" onmouseout="bookResultCardOut(this)" onmouseover="bookResultCardIn(this)">
                                <img src={{aBook.images.large}} alt="" class="book-search-result-img">
                                <span class="book-search-result-title mdui-text-truncate">{{aBook.title}}</span>
                                <br>
                                <span class="book-search-result-author mdui-text-truncate">{{aBook.author[0]}}</span>
                                <button class="book-search-result-play-btn mdui-btn mdui-color-indigo-900 mdui-ripple" mdui-dialog="{target: '#book-detail-content-box'}" onclick="bookResultDetail(this)">详情</button>
                            </div>
                            {{/if}}
                        {{/each}}
                    </script>
                </div>
            </div>
            <!-- 第2类 ：科技-->
            <div class="mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-text-color-pink-a200" id="book-second-box">
                <h2>科技</h2>
                <div id="book-second-content-box">

                <!-- 使用bookClassTemp -->
                </div>
            </div>
            <!-- 第3类 ：流行-->
            <div class="mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-text-color-pink-a200" id="book-third-box">
                <h2>流行</h2>
                <div id="book-third-content-box">
                    <!-- 使用bookClassTemp -->
                </div>
            </div>
            <!-- 第4类 ：生活-->
            <div class="mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-text-color-pink-a200" id="book-forth-box">
                <h2>生活</h2>
                <div id="book-forth-content-box">
                    <!-- 使用bookClassTemp -->
                </div>
            </div>
        </div>
        <!-- 音乐模块 -->
        <div id="music" class="mdui-p-a-2">
            <!-- 播放器子模块 -->

                <div class="mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-card mdui-shadow-6" id="music-player">
                    <!-- 封面 -->
                    <img src="http://i.gtimg.cn/music/photo/mid_album_300/c/k/0044cHmg45iock.jpg"  id="music-cover-img" alt="">
                    <span class="mdui-text-truncate" id="music-cover-title">童话镇</span>
                    <span id="music-cover-singer">陈一发</span>
                    <!-- 歌曲进度条 -->
                    <div class="music-progress">
                        <span id="music-current-time">0:00</span>
                        <span>/</span>
                        <span id="music-total-time">4:35</span>
                        <div class="mdui-progress" id="music-bar">
                            <div class="mdui-progress-determinate" id="music-played-bar"></div>
                        </div>
                    </div>
                    <!-- 音乐控制 -->
                    <div class="music-controls">
                        <a class="mdui-btn mdui-btn-icon mdui-color-pink-a200 mdui-ripple" id="music-controls-loop" href="javascript:;"></a>
                        <a class="mdui-btn mdui-btn-icon mdui-color-pink-a200 mdui-ripple" id="music-controls-prev" href="javascript:;"><i class="mdui-icon material-icons">skip_previous</i></a>
                        <a class="mdui-btn mdui-btn-icon mdui-color-pink-a200 mdui-ripple" id="music-controls-play" href="javascript:;"><i class="mdui-icon material-icons">play_arrow</i></a>
                        <a class="mdui-btn mdui-btn-icon mdui-color-pink-a200 mdui-ripple" id="music-controls-next" href="javascript:;"><i class="mdui-icon material-icons">skip_next</i></a>
                        <a class="mdui-btn mdui-btn-icon mdui-color-pink-a200 mdui-ripple" id="music-controls-volume-off" href="javascript:;"><i class="mdui-icon material-icons">volume_off</i></a>
                        <label class="mdui-slider mdui-slider-discrete"  id="music-volume-box">
                            <input id="music-volume" type="range" step="1" min="0" max="100"/>
                        </label>
                    </div>
                    <audio id="music-audio">
                        <source title="童话镇" data-singer="陈一发" data-img="http://i.gtimg.cn/music/photo/mid_album_300/c/k/0044cHmg45iock.jpg" src="http://ws.stream.qqmusic.qq.com/108756031.m4a?fromtag=46" id="music-audio-source">
                    </audio>
                </div>
            <!-- 音乐搜索子模块 -->
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-card mdui-shadow-6" id="music_search">
                <div id="music-search-box">
                    <i class="mdui-icon material-icons">search</i>
                    <label class="mdui-textfield-label">音乐</label>
                    <input class="mdui-textfield-input" id="music-search-content" type="text"/>
                    <!-- 搜索按钮 -->
                    <button class="mdui-btn mdui-color-pink-a200 mdui-ripple" id="music-search-btn" type="button" name="button">搜索</button>
                </div>
                <!-- 搜索时进度条 -->
                <div class="mdui-progress" id="music-search-waiting">
                    <div class="mdui-progress-indeterminate mdui-color-pink-a200"></div>
                </div>
                <!-- 搜索结果展示模块 -->
                <!-- 定义模板 -->
                <div id="music-search-result-box">
                    <script type="text/html" id="showTemp">
                        {{each contentlist as aContent index}}
                            {{if index<5}}
                            <div data-img="{{aContent.albumpic_big}}" data-title="{{aContent.songname}}" data-singer="{{aContent.singername}}" data-src="{{aContent.m4a}}" class="mdui-card mdui-hoverable music-search-result-card" onmouseout="resultCardOut(this)" onmouseover="resultCardIn(this)">
                                {{if aContent.albumpic_big}}
                                <img src={{aContent.albumpic_big}} alt="" class="music-search-result-img">
                                {{else}}
                                <img src="./img/no_img_song.jpg" alt="" class="music-search-result-img">
                                {{/if}}
                                <span class="music-search-result-title mdui-text-truncate">{{aContent.songname}}</span>
                                <br>
                                <span class="music-search-result-singer">{{aContent.singername}}</span>
                                <button class="music-search-result-play-btn mdui-btn mdui-color-indigo-900 mdui-ripple" onclick="resultPlay(this)">播放</button>
                            </div>
                            {{/if}}
                        {{/each}}
                    </script>
                </div>
            </div>

            <!-- top20 -->
            <div class="mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-text-color-pink-a200" id="music-topxx-box">
                <h2>TOP25</h2>
                <div id="music-topxx-content-box">
                    <script type="text/html" id="topTemp">
                        {{each songlist as aList index}}
                            {{if index<25}}
                            <div data-img="{{aList.albumpic_big}}" data-title="{{aList.songname}}" data-singer="{{aList.singername}}" data-src="{{aList.url}}" class="music-search-result-card mdui-card mdui-hoverable" onmouseout="resultCardOut(this)" onmouseover="resultCardIn(this)">
                                {{if aList.albumpic_big}}
                                <img src={{aList.albumpic_big}} alt="" class="music-search-result-img">
                                {{else}}
                                <img src="./img/no_img_song.jpg" alt="" class="music-search-result-img">
                                {{/if}}
                                <span class="mdui-text-truncate music-search-result-title">{{aList.songname}}</span>
                                <br>
                                <span class="mdui-text-truncate music-search-result-singer">{{aList.singername}}</span>
                                <button class="music-search-result-play-btn mdui-btn mdui-color-indigo-900 mdui-ripple" onclick="resultPlay(this)">播放</button>
                            </div>
                            {{/if}}
                        {{/each}}
                    </script>
                </div>
            </div>
        </div>

        <!-- 电影模块 -->
        <div id="movie" class="mdui-p-a-2">
            <!-- 头部图片展示 -->
            <div class="mdui-col-xs-12 mdui-card mdui-shadow-12" id="movie-head">
                <span class="movie-head-text">我们最接近的时候，我跟她之间的距离只有0.01公分</span>
                <br>
                <span class="movie-head-text">57个小时之后，我爱上了这个女人</span>
            </div>

            <!-- 电影搜索模块 -->
            <div class="mdui-textfield mdui-textfield-floating-label mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-card mdui-shadow-6" id="movie_search">
                <div id="movie-search-box">
                    <i class="mdui-icon material-icons">search</i>
                    <label class="mdui-textfield-label">电影</label>
                    <input class="mdui-textfield-input" id="movie-search-content" type="text"/>
                    <!-- 搜索按钮 -->
                    <button class="mdui-btn mdui-color-pink-a200 mdui-ripple" id="movie-search-btn" type="button" name="button">搜索</button>
                </div>
                <!-- 搜索时进度条 -->
                <div class="mdui-progress" id="movie-search-waiting">
                    <div class="mdui-progress-indeterminate mdui-color-pink-a200"></div>
                </div>
                <!-- 搜索结果展示模块 -->
                <!-- 定义模板 -->
                <div id="movie-search-result-box">
                    <script type="text/html" id="movieSearchTemp">
                        {{each subjects as aMovie index}}
                            {{if index<5}}
                            <div data-index="{{index}}" class="mdui-card mdui-hoverable movie-search-result-card" onmouseout="movieResultCardOut(this)" onmouseover="movieResultCardIn(this)">
                                <img src={{aMovie.images.large}} alt="" class="movie-search-result-img">
                                <span class="movie-search-result-title mdui-text-truncate">{{aMovie.title}}</span>
                                <br>
                                <span class="movie-search-result-rating">豆瓣评分:★{{aMovie.rating.average}}</span>
                                <button class="movie-search-result-play-btn mdui-btn mdui-color-indigo-900 mdui-ripple" mdui-dialog="{target: '#movie-detail-content-box'}" onclick="movieResultDetail(this)">详情</button>
                            </div>
                            {{/if}}
                        {{/each}}
                    </script>
                </div>
            </div>

            <!-- 电影板块展示 -->
            <!-- 第一类 ：-->
            <div class="mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-text-color-pink-a200" id="movie-first-box">
                <h2>正在热映</h2>
                <div id="movie-first-content-box">
                    <script type="text/html" id="movieClassTemp">
                        {{each subjects as aMovie index}}
                            {{if index<20}}
                            <div data-index="{{index}}" class="mdui-card mdui-hoverable movie-search-result-card" onmouseout="movieResultCardOut(this)" onmouseover="movieResultCardIn(this)">
                                <img src={{aMovie.images.large}} alt="" class="movie-search-result-img">
                                <span class="movie-search-result-title mdui-text-truncate">{{aMovie.title}}</span>
                                <br>
                                <span class="movie-search-result-rating">豆瓣评分:★{{aMovie.rating.average}}</span>
                                <button class="movie-search-result-play-btn mdui-btn mdui-color-indigo-900 mdui-ripple" mdui-dialog="{target: '#movie-detail-content-box'}" onclick="movieResultDetail(this)">详情</button>
                            </div>
                            {{/if}}
                        {{/each}}
                    </script>
                </div>
            </div>
            <!-- 第2类 ：-->
            <div class="mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-text-color-pink-a200" id="movie-second-box">
                <h2>即将上映</h2>
                <div id="movie-second-content-box">

                <!-- 使用movieClassTemp -->
                </div>
            </div>
            <!-- 第3类 ：-->
            <div class="mdui-col-lg-6 mdui-col-offset-lg-3 mdui-col-xs-12 mdui-text-color-pink-a200" id="movie-third-box">
                <h2>TOP250</h2>
                <div id="movie-third-content-box">
                    <!-- 使用bookClassTemp -->
                </div>
            </div>
            <!-- 第4类 ：-->
            <!-- <div class="mdui-col-xs-6 mdui-col-offset-xs-3 mdui-text-color-pink-a200" id="movie-forth-box">
                <h2>生活</h2>
                <div id="movie-forth-content-box">
                    使用bookClassTemp
                </div>
            </div> -->
        </div>
    </div>

    <!-- 抽屉导航 -->
    <div class="mdui-drawer mdui-drawer-close" id="drawer" overlay="true">
        <ul class="mdui-list">
            <li class="mdui-list-item mdui-ripple">
              <i class="mdui-list-item-icon mdui-icon material-icons">keyboard</i>
              <div class="mdui-list-item-content">博客</div>
            </li>
            <li class="mdui-list-item mdui-ripple">
              <i class="mdui-list-item-icon mdui-icon material-icons">edit</i>
              <div class="mdui-list-item-content">随笔</div>
            </li>
            <li class="mdui-list-item mdui-ripple">
              <i class="mdui-list-item-icon mdui-icon material-icons">photo_camera</i>
              <div class="mdui-list-item-content">摄影</div>
            </li>
            <li class="mdui-list-item mdui-ripple">
              <i class="mdui-list-item-icon mdui-icon material-icons">person</i>
              <div class="mdui-list-item-content">关于我</div>
            </li>
            <li class="mdui-subheader">Subheader</li>
            <li class="mdui-list-item mdui-ripple">
              <i class="mdui-list-item-icon mdui-icon material-icons">&#xe0be;</i>
              <div class="mdui-list-item-content">All mail</div>
            </li>
            <li class="mdui-list-item mdui-ripple">
              <i class="mdui-list-item-icon mdui-icon material-icons">&#xe872;</i>
              <div class="mdui-list-item-content">Trash</div>
            </li>
            <li class="mdui-list-item mdui-ripple">
              <i class="mdui-list-item-icon mdui-icon material-icons">&#xe000;</i>
              <div class="mdui-list-item-content">Spam</div>
            </li>
        </ul>
    </div>

    <!-- 图书详情对话框 -->
    <div class="mdui-dialog" id="book-detail-content-box">
        <script type="text/html" id="bookDetailTemp">
            <div class="mdui-dialog-content book-detail-box" id="">
                <img src={{images.large}} alt="" class="book-detail-img">
                <span class="book-detail-title mdui-text-truncate">{{title}}</span>
                <span class="book-detail-author mdui-text-truncate">{{author[0]}}</span>
                <span class="book-detail-rating">豆瓣评分:{{rating.average}}</span>
                <br>
                {{each tags as atag}}
                <div class="mdui-chip">
                    <span class="mdui-chip-title">{{atag.name}}</span>
                </div>
                {{/each}}
                <br>
                <h2>内容简介</h2>
                <p>{{summary}}</p>
                <h2>作者简介</h2>
                <p>{{author_intro}}</p>
            </div>
            <div class="mdui-dialog-actions">
                {{if ebook_url}}
                <button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="window.open('{{alt}}')">有试读 -> 去豆瓣看看</button>
                {{else}}
                <button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="window.open('{{alt}}')">去豆瓣看看</button>
                {{/if}}
            </div>
        </script>
    </div>

    <!-- 电影详情对话框 -->
    <div class="mdui-dialog" id="movie-detail-content-box">
        <script type="text/html" id="movieDetailTemp">
            <div class="mdui-dialog-content movie-detail-box" id="">
                <img src={{images.large}} alt="" class="movie-detail-img">
                <span class="movie-detail-title mdui-text-truncate">{{title}}</span>
                <span class="movie-detail-rating">豆瓣评分:{{rating.average}}</span>
                <br>
                {{each genres as agen}}
                <div class="mdui-chip">
                    <span class="mdui-chip-title">{{agen}}</span>
                </div>
                {{/each}}
                <br>
                <h2>主演</h2>
                <div class="movie-detail-cast-box">
                    {{each casts as aCast}}
                    <div class="mdui-card mdui-hoverable movie-detail-cast">
                        <img src="{{aCast.avatars.medium}}" alt="" class="movie-detail-cast-img">
                        <br>
                        <span class="movie-detail-cast-name">{{aCast.name}}</span>
                    </div>
                    {{/each}}
                </div>
                <h2>导演</h2>
                <div class="movie-detail-director-box">
                    <div class="mdui-card mdui-hoverable movie-detail-director">
                        <img src={{directors[0].avatars.large}} alt="" class="movie-detail-director-img">
                        <br>
                        <span class="movie-detail-director-name mdui-text-truncate">{{directors[0].name}}</span>
                    </div>
                </div>
            </div>
            <div class="mdui-dialog-actions">
                <button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="window.open('{{alt}}')">去豆瓣看看</button>
            </div>
        </script>
    </div>
</body>
<script src="./js/master.js" charset="utf-8"></script>
<script src="./js/music_player.js" charset="utf-8"></script>
<script src="./js/music_search.js" charset="utf-8"></script>
<script src="./js/book_search.js" charset="utf-8"></script>
<script src="./js/movie_search.js" charset="utf-8"></script>
</html>
